<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>three</title>
    <style>
        ul {
            float: left;
            height: 180px;
            /* background-color: aqua; */
            padding: 0;
        }
        ul:nth-child(1){
            margin-left: 17%;
        }
        ul li {
            list-style: none;
            width: 100%;
            height: 25%;
            /* background-color: antiquewhite; */
            /* 虚线 */
            border-bottom: 1px dashed #000;
            font-size: 17px;
            text-align: center;
            padding-bottom: -20px;
            padding-top: 20px;
        }
        ul li:nth-child(2) {
            color: blue;
        }
        ul li:nth-child(3) {
            color: blue;
        }
        ul li:last-child {
            color: blue;
        }
        button {
            width: 100%;
            height: 100%;
            /* background-color: aqua; */
            border: none;
            background-color: white;
            color: blueviolet;
            font-size: 19px;
            margin-top: -20px;
        }
        ul li:first-child {
            font-size: 21px;
            font-weight: bolder;
            color: green;
        }
    </style>
</head>
<body>
    <ul style="width: 5%;">
        <li>订单号</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
    </ul>
    <ul style="width: 15%;">
        <li>商品名称</li>
        <li>全自动洗衣机</li>
        <li>零基础学JavaScript</li>
        <li>数码相机</li>
    </ul>
    <ul style="width: 5%;">
        <li>数量</li>
        <li>1</li>
        <li>2</li>
        <li>1</li>
    </ul>
    <ul style="width: 5%;">
        <li>单价</li>
        <li>1699</li>
        <li>50</li>
        <li>2599</li>
    </ul>
    <ul style="width: 14%;">
        <li>消费金额</li>
        <li>1699</li>
        <li>100</li>
        <li>2599</li>
    </ul>
    <ul style="width: 15%;">
        <li>下单日期</li>
        <li>2023-08-10 10:19</li>
        <li>2023-08-12 13:16</li>
        <li>2023-08-16 15:16</li>
    </ul>
    <ul style="width: 5%;">
        <li>操作</li>
        <li style="color: blueviolet;"><button>删除</button></li>
        <li style="color: blueviolet;"><button>删除</button></li>
        <li style="color: blueviolet;"><button>删除</button></li>
    </ul>
    <script>
        var deletes = document.querySelectorAll('button');
        deletes[0].onclick = function (){
            if(confirm('确定删除吗？')){
                var li = document.querySelectorAll('ul li');
                // console.log(li);
                for(let j=0;j<li.length;j++) {
                    if(li[j].innerHTML=='13'){
                        var flag = j;
                    }
                }
                for(let j=0;j<li.length;j++){
                    // console.log(j%li.length/7);
                    if(j%(li.length/7)===flag){
                        li[j].parentNode.removeChild(li[j]);
                        // console.log(li[j]);
                    }
                }
        }
    }
        deletes[1].onclick = function (){
            if(confirm('确定删除吗？')){
                var li = document.querySelectorAll('ul li');
                // console.log(li);
                for(let j=0;j<li.length;j++) {
                    if(li[j].innerHTML=='14'){
                        var flag = j;
                    }
                }
                for(let j=0;j<li.length;j++){
                    // console.log(j%li.length/7);
                    if(j%(li.length/7)===flag){
                        li[j].parentNode.removeChild(li[j]);
                        // console.log(li[j]);
                    }
                }
            }
        }
        deletes[2].onclick = function (){
            if(confirm('确定删除吗？')){
                var li = document.querySelectorAll('ul li');
                // console.log(li);
                for(let j=0;j<li.length;j++) {
                    if(li[j].innerHTML=='15'){
                        var flag = j;
                    }
                }
                for(let j=0;j<li.length;j++){
                    // console.log(j%li.length/7);
                    if(j%(li.length/7)===flag){
                        li[j].parentNode.removeChild(li[j]);
                        // console.log(li[j]);
                    }
                }
            }
        }
    </script>
</body>
</html>